<template>
  <div class="cwgkFace">
    <div>
      <div class="cwgkInfo" >
        <label>车位总数（个）</label>
        <span>{{ cwgkDataObj.cwgk_sum }}</span>
        <div v-if="infoType === 1" class="bar2"></div>
        <div v-if="infoType === 1"  >
          <div  >
            <label>快充车位</label>
            <span>{{ cwgkDataObj.cwgk_kccw }}</span>
          </div>
          <div  >
            <label>慢充车位</label>
            <span>{{ cwgkDataObj.cwgk_mccw }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //车辆概况
  name: "cwgkFace",
  props:{
    infoType: {
      type: Number,
      default:0
    },
  },
  data(){
    return {
      cwgkDataObj:{
        cwgk_sum: 0,
        cwgk_kccw: 0,
        cwgk_mccw: 0
      }
    }
  },
  mounted() {
    fetch(`./testData/cwgkdata.json`,{
      method: 'get',
      headers: {
        'Content-Type': 'application/json'
      }
    })
        .then(response => response.json())
        .then(data => {
          this.cwgkDataObj = data;
        })
  },
  methods: {
  },
  beforeDestroy() {
  }
}
</script>

<style lang="scss" scoped>
.cwgkFace {
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  >div{
    width: 90%;
    height: 63%;
    background: url(../../assets/selfImp/cwgk_bg.png) no-repeat #000;
    background-size: 100% 100%;
    >.cwgkInfo{
      width: 83%;
      height: 100%;
      float: right;
      display: flex;
      align-items: center;
      justify-content: space-around;
      span{
        color: #00FFE6;
        font-size: large;
        font-weight: 800;
      }
      label{
        color: #FFFFFF;
        font-size: small;
        font-weight: 800;
        margin: 0;
      }
    }
  }
}
</style>
